<template>
  <div id="app">
    <transition :name="animationName">
      <router-view/>
    </transition>

  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      animationName: ""
    };
  },
  watch: {
    $route(to, from) {
      const toDepth = to.path.split("/").length;
      const fromDepth = from.path.split("/").length;
      this.animationName =
        toDepth < fromDepth? "slideright": (toDepth == fromDepth ? "hide-show" : "slideleft");
    }
  }
};
</script>

<style>
/* 父到子---向左滑动 */
/* .slide-left-leave-active {
  transform: translateX(0%);
  transition: all .5s;
}
.slide-left-enter{
  opacity: 0;
}
.slide-left-leave-to {
  transform: translateX(-100%);
  transition: all .5s;
} */

/* 同级之间跳转显隐 */
.hide-show-leave-active,.hide-show-enter-active{
  transition: all .3s;
}
.hide-show-enter-active{
  transition: all .6s;
}
.hide-show-enter,.hide-show-leave-to{
  opacity: 0;
  transform: translateY(50%)
}

.slideleft-enter-active,.slideleft-leave-active,.slideright-enter-active,.slideright-leave-active{transition: all 1s;}
.slideleft-enter,.slideleft-leave-to,.slideright-enter,.slideright-leave-to{opacity: 0;}
.slideright-enter {transform: translateX(+100%);}
.slideright-leave-active {transform: translateX(-100%);}
.slideleft-enter {transform: translateX(100%);}
.slideleft-leave-active {transform: translateX(+100%);}
</style>
